﻿<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>樂有商城--商品搜索结果页</title>
    <link rel="icon" href="assets/img/favicon.ico">
    <link href='./css/material.css' rel="stylesheet">
    <link href="./css/vuetify.min.css" rel="stylesheet">
    <script src="./js/vue/vue.js"></script>
    <script src="./js/vue/vuetify.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-list.css"/>
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css"/>
    <style type="text/css">
        * {
            box-sizing: unset;
        }

        .btn-arrow, .btn-arrow:visited, .btn-arrow:link, .btn-arrow:active {
            width: 46px;
            height: 23px;
            border: 1px solid #DDD;
            background: #FFF;
            line-height: 23px;
            font-family: "\5b8b\4f53";
            text-align: center;
            font-size: 16px;
            color: #AAA;
            text-decoration: none;
            out-line: none
        }

        .btn-arrow:hover {
            background-color: #1299ec;
            color: whitesmoke;
        }

        .top-pagination {
            display: block;
            padding: 3px 15px;
            font-size: 11px;
            font-weight: 700;
            line-height: 18px;
            color: #999;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
            text-transform: uppercase;
            float: right;
            margin-top: 6px
        }

        .top-pagination span {
            margin-right: 10px;
        }

        .logo-list li {
            padding: 8px;
        }

        .logo-list li:hover {
            background-color: #f3f3f3;
        }

        .type-list a:hover {
            color: #1299ec;
        }

        .skus {
            list-style: none;
        }

        .skus li {
            list-style: none;
            display: inline-block;
            float: left;
            margin-left: 2px;
            border: 2px solid #f3f3f3;
        }

        .skus li.selected {
            border: 2px solid #dd1144;
        }

        .skus img {
            width: 25px;
            height: 25px;
        }
    </style>
    <script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
</head>

<body>

<div id="searchApp">
    <div id="nav-bottom">
        <ly-top/> <!--头部-->
    </div>

    <!--list-content-->
    <div class="main">
        <div class="py-container">

            <div class="bread">
                <!--面包屑-->
                <ul class="fl sui-breadcrumb">
                    <li><span>全部结果:</span></li>
                    <li v-for="(c, i) in breads" :key="i">
                        <a href="#" v-if="i < 2">{{c.name}}</a>
                        <span v-else>{{c.name}}</span>
                    </li>
                    <!--<li ><span>手机通讯</span></li>-->
                </ul>
                <!--已选择过滤项-->
                <ul class="tags-choose">
                    <li class="tag" v-for="(v, k) in search.filter" v-if="k != 'cid3'" :key="k">
                        {{k === 'brandId' ? '品牌' : k}}:<span style="color: red">{{getFilterValue(k,v)}}</span>
                        <!--如果选的是品牌 显示：品牌:...-->
                        <i class="sui-icon icon-tb-close" @click="removeFilter(k)"></i>
                    </li>
                    <!--<li class="tag">
                        内存:<span style="color: red">4G</span>
                        <i class="sui-icon icon-tb-close"></i>
                    </li>-->
                </ul>
                <div class="clearfix"></div>
            </div>
            <!--selector-->
            <div class="clearfix selector">
                <!--分类/其他-->
                <div class="type-wrap" v-for="(f,i) in remainFilters" :key="f.k" v-if="f.k !== 'brandId'"
                     v-show="i <= 3 || showMore"><!--实现更多/收起 小于4条数据一定展示 大于5条数据 取决于showMore-->
                    <div class="fl key" v-text="f.k === 'cid3' ?  '分类' : f.k"></div><!--注意f.k-->
                    <div class="fl value">
                        <ul class="type-list">
                            <li v-for="(o,j) in f.options" :key="j" v-if="o" @click="selectFilter(f.k, o.id || o)">
                                <!-- v-if="o"解决非空 o有值显示-->
                                <a v-text="o.name || o"></a>
                            </li>
                        </ul>
                    </div>
                    <div class="fl ext"></div>
                </div>
                <!--品牌-->
                <div class="type-wrap logo" v-else>
                    <div class="fl key brand">品牌</div>
                    <div class="value logos">
                        <ul class="logo-list" v-for="(o,j) in f.options" :key="j">
                            <li v-if="o.image"><img :src="o.image" @click="selectFilter(f.k, o.id || o)"/></li>
                            <li v-else><a href="#" v-text="o.name" @click="selectFilter(f.k, o.id || o)"></a></li>
                        </ul>
                    </div>
                    <div class="fl ext">
                        <a href="javascript:void(0);" class="sui-btn">多选</a>
                    </div>
                </div>

                <!--更多/收起-->
                <div class="type-wrap" style="text-align: center">
                    <v-btn small flat v-show="!showMore" @click="showMore=true">
                        更多
                        <v-icon><!--arrow_drop_down--></v-icon>
                    </v-btn>
                    <v-btn small="" flat v-show="showMore" @click="showMore=false">
                        收起
                        <v-icon><!--arrow_drop_up--></v-icon>
                    </v-btn>
                </div>
            </div>
            <!--details-->
            <div class="details">
                <div class="sui-navbar">
                    <div class="navbar-inner filter">
                        <ul class="sui-nav">
                            <li class="active">
                                <a href="#">综合</a>
                            </li>
                            <li>
                                <a href="#">销量</a>
                            </li>
                            <li>
                                <a href="#">新品</a>
                            </li>
                            <li>
                                <a href="#">评价</a>
                            </li>
                            <li>
                                <a href="#">价格</a>
                            </li>
                        </ul>
                        <div class="top-pagination">
                            <span>共 <i style="color: #222;">{{total}}+</i> 商品</span>
                            <span><i style="color: red;">{{search.page}}</i>/{{totalPage}}</span>
                            <a class="btn-arrow" href="#" @click.prevent="prePage" style="display: inline-block">&lt;</a>
                            <a class="btn-arrow" href="#" @click.prevent="nextPage"
                               style="display: inline-block">&gt;</a>
                        </div>
                    </div>
                </div>
                <div class="goods-list">
                    <ul class="yui3-g">
                        <li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id">
                            <div class="list-wrap">
                                <div class="p-img">
                                    <!--点击图片后跳转地址-->
                                    <a :href=" '/item/' + goods.id + '.html'" target="_blank"><img :src="goods.selectedSku.image" height="200"/></a>
                                    <!-- :src="goods.selectedSku.image"   img/_/mobile01.png-->
                                    <!--多个sku图片列表-->
                                    <ul class="skus">
                                        <!--遍历goods中的skus的图片 并实现鼠标选择图片去改变sku数据-->
                                        <li :class="{selected: goods.selectedSku.id === sku.id}" @mouseenter="goods.selectedSku=sku"
                                            v-for="sku in goods.skus" :key="sku.id">
                                            <img :src="sku.image">
                                        </li>
                                    </ul>
                                </div>
                                <div class="clearfix"></div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i v-text="ly.formatPrice(goods.selectedSku.price)"></i>
                                    </strong>
                                </div>
                                <div class="attr">
                                    <em v-text="goods.selectedSku.title.substring(0,20) + '...'"></em>
                                </div>
                                <div class="cu">
                                    <em><span>促</span>{{goods.subTitle.substring(0,15) + '...'}}</em>
                                </div>
                                <div class="commit">
                                    <i class="command">已有{{goods.selectedSku.price}}人评价</i>
                                </div>
                                <div class="operate">
                                    <a href="#" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">对比</a>
                                    <a href="javascript:void(0);" class="sui-btn btn-bordered">关注</a>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
                <!--分页条-->
                <div class="fr">
                    <div class="sui-pagination pagination-large">
                        <ul>
                            <li :class="{prev:true,disabled: search.page === 1}">
                                <a href="#" @click.prevent="prePage">«上一页</a><!--点击事件-->
                            </li>
                            <li class="dotted"><span v-show="search.page>=totalPage-2 && totalPage-5 === 5">...</span></li><!--控制...-->

                            <li :class="{active: index(i) === search.page}" v-for="i in Math.min(5, totalPage)" :key="i">
                                <!--不足5页时 不能遍历到5 取最小的5或总页数(有可能小于5的数)-->
                                <a href="#" v-text="index(i)"></a>
                            </li>

                            <li class="dotted"><span v-show="search.page+2<totalPage && totalPage>5">...</span></li><!--控制...-->
                            <li :class="{next:true,disabled: search.page === totalPage}">
                                <a href="#" @click="nextPage">下一页»</a>
                            </li>
                        </ul>
                        <div>
                            <span>共{{totalPage}}页&nbsp;</span>
                            <span>到第<input type="text" class="page-num" >页
                                <button class="page-confirm" onclick="alert(1)">确定</button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!--hotsale-->
            <!--<div class="clearfix hot-sale">-->
                <!--<h4 class="title">热卖商品</h4>-->
                <!--<div class="hot-list">-->
                    <!--<ul class="yui3-g">-->
                        <!--<li class="yui3-u-1-4">-->
                            <!--<div class="list-wrap">-->
                                <!--<div class="p-img">-->
                                    <!--<img src="img/like_01.png"/>-->
                                <!--</div>-->
                                <!--<div class="attr">-->
                                    <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                                <!--</div>-->
                                <!--<div class="price">-->
                                    <!--<strong>-->
                                        <!--<em>¥</em>-->
                                        <!--<i>4088.00</i>-->
                                    <!--</strong>-->
                                <!--</div>-->
                                <!--<div class="commit">-->
                                    <!--<i class="command">已有700人评价</i>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</li>-->
                        <!--<li class="yui3-u-1-4">-->
                            <!--<div class="list-wrap">-->
                                <!--<div class="p-img">-->
                                    <!--<img src="img/like_03.png"/>-->
                                <!--</div>-->
                                <!--<div class="attr">-->
                                    <!--<em>金属A面，360°翻转，APP下单省300！</em>-->
                                <!--</div>-->
                                <!--<div class="price">-->
                                    <!--<strong>-->
                                        <!--<em>¥</em>-->
                                        <!--<i>4088.00</i>-->
                                    <!--</strong>-->
                                <!--</div>-->
                                <!--<div class="commit">-->
                                    <!--<i class="command">已有700人评价</i>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</li>-->
                        <!--<li class="yui3-u-1-4">-->
                            <!--<div class="list-wrap">-->
                                <!--<div class="p-img">-->
                                    <!--<img src="img/like_04.png"/>-->
                                <!--</div>-->
                                <!--<div class="attr">-->
                                    <!--<em>256SSD商务大咖，完爆职场，APP下单立减200</em>-->
                                <!--</div>-->
                                <!--<div class="price">-->
                                    <!--<strong>-->
                                        <!--<em>¥</em>-->
                                        <!--<i>4068.00</i>-->
                                    <!--</strong>-->
                                <!--</div>-->
                                <!--<div class="commit">-->
                                    <!--<i class="command">已有20人评价</i>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</li>-->
                        <!--<li class="yui3-u-1-4">-->
                            <!--<div class="list-wrap">-->
                                <!--<div class="p-img">-->
                                    <!--<img src="img/like_02.png"/>-->
                                <!--</div>-->
                                <!--<div class="attr">-->
                                    <!--<em>Apple苹果iPhone 6s (A1699)</em>-->
                                <!--</div>-->
                                <!--<div class="price">-->
                                    <!--<strong>-->
                                        <!--<em>¥</em>-->
                                        <!--<i>4088.00</i>-->
                                    <!--</strong>-->
                                <!--</div>-->
                                <!--<div class="commit">-->
                                    <!--<i class="command">已有700人评价</i>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</li>-->
                    <!--</ul>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>

</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#searchApp",
        data: {
            ly,
            search: {
                key: "",
                page: 1,
                filter: {},
            },
            goodsList: [],
            total: 0,
            totalPage: 0,
            selectedSku: {},
            filters: [], //过滤项
            showMore: false, //是否显示更多
            breads: [], //面包屑
        },
        created() {
            // 判断是否有请求参数
            if (!location.search) {
                return;
            }
            // 获取请求参数
            const search = ly.parse(location.search.substring(1));
            ///search.page = search.page ? parseInt(search.page) : 1;
            search.page = parseInt(search.page) || 1; //短路 前为true走前面 否则走后面  初始化当前页
            //search.filter = search.filter ? search.filter: {}; //初始化过滤条件
            search.filter = search.filter || {};
            this.search = search;
            // 发送到后台
            this.loadData();
        },
        //监控search数据
        watch: {
            search: {
                deep: true,
                handler(val, oldVal) {
                    if (!oldVal || !oldVal.key) { //避免死循环 页面重复加载search
                        return;
                    }
                    // 把请求的参数写到url中
                    location.search = "?" + ly.stringify(this.search);
                }
            }
        },
        methods: {
            loadData() {
                //发起异步请求
                // 发起异步请求
                ly.http.post("/search/page", this.search).then(resp => {
                    console.log(resp);
                    // 1 保存分页结果
                    this.total = resp.data.total;
                    this.totalPage = resp.data.totalPage;
                    // 保存数据 当前页商品
                    resp.data.items.forEach(goods => {
                        // 把json处理成js对象
                        goods.skus = JSON.parse(goods.skus);
                        // 初始化被选中的sku
                        goods.selectedSku = goods.skus[0];
                    });
                    this.goodsList = resp.data.items;

                    //初始化商品分类过滤参数
                    if (resp.data.categories.length === 1) {
                        // 如果只有1个，那么就查询三级商品分类，展示到面包屑
                        ly.http.get("/item/category/all/level?id=" + resp.data.categories[0].id)
                            .then(resp => this.breads = resp.data);
                    }

                    //2 获取聚合结果，形成过滤项
                    //2.1商品分类
                    this.filters.push({
                        k: "cid3",
                        options: resp.data.categories
                    });
                    //2.2商品品牌
                    this.filters.push({
                        k: "brandId",
                        options: resp.data.brands
                    });
                    //2.3 其他规格
                    resp.data.specs.forEach(spec => this.filters.push(spec));

                }).catch(error => {

                })
            },
            //处理页码的问题 i 为页面页码数 1~5
            index(i) {
                if (this.search.page <= 3 || this.totalPage < 5) { //当前页小于3直接返回 5  或者是总页数小于5时 直接返回
                    return i;
                } else if (this.search.page >= this.totalPage - 2) { //当前页大于或等于总页数 -2 时 如：10页 当前页8(5个数的中间位)
                    return this.totalPage - 5 + i;  //总页数-5 后5个页数  + i 使后3个和前3个一样的效果 ？
                } else {
                    return i + this.search.page - 3;  //当前页大于3时 比如i=4 使当前页码 - 3(4-3=1)  1 再 + i(4) = 5个页数 当前页保持在中间位置
                }
            },
            prePage() {
                if (this.search.page > 1) {
                    this.search.page--;
                }
            },
            nextPage() {
                if (this.search.page < this.totalPage) {
                    this.search.page++;
                }
            },
            selectFilter(key, option) {
                // 从filter中复制属性到obj
                const {...obj} = this.search.filter;  //结构表达式
                obj[key] = option; //先填完值 再添加到filter
                //添加到search.filter
                //this.search.filter[key] = option; //filter内部属性发生改变  //.key key为属性 不能用. 想用key变量中的值当属性 使用[]  js可以添加key为变量的值为属性
                this.search.filter = obj;  //filter地址改变
            },
            // 已选择过滤项 方法 获取对应的规格参数名称和值
            getFilterValue(k, v) {
                // 如果没有过滤参数，我们跳过展示
                if (!this.filters || this.filters.length === 0) {
                    return null;
                }
                let filter = null;
                // 判断是否是品牌
                if (k === 'brandId') {
                    // 返回品牌名称
                    return this.filters.find(f => f.k === 'brandId').options[0].name;
                }
                return v;
            },
            //取消选择项
            removeFilter(k) {
                this.search.filter[k] = null;
            },
            //加入购物车
            addCart() {
                let cart = {
                    skuId: this.sku.id,
                    title: this.sku.title,
                    image: this.images[0],
                    price: this.sku.price,
                    num: this.num,
                    ownSpec: this.sku.ownSpec,
                };
                ly.http.get("/auth/verify").then(() => {
                    //已登录
                    ly.http.post("/cart", cart).then(() => {
                        // 跳转  用来展示购物车的内容
                        window.location.href = "http://www.leyou.com/cart.html";
                    }).catch(() => {
                        alert("添加购物车失败,请重试!");
                    })
                }).catch(() => {
                    //未登录
                    /**
                     * 构造一个购物车的数据对象
                     * */
                        //看一下本地localStorage有没有存过这个玩意，如果已经存过了，改数量
                    let localCarts = ly.store.get("carts") || [];
                    //获取当前与商品id一致的购物车数据
                    let storeCart = localCarts.find(ct => ct.skuId === cart.skuId);
                    //本地已经有了就改值
                    if (storeCart) {
                        //存在,修改值
                        storeCart.num = storeCart.num + cart.num;
                    } else {
                        //不存在,新增
                        localCarts.push(cart);
                    }
                    //把最新的数据重新存储,未登录
                    ly.store.set("carts", localCarts);

                    // 跳转  用来展示购物车的内容
                    window.location.href = "http://www.leyou.com/cart.html";
                })
            }
        },
        //计算属性，把filters中的 已经被选择的key过滤掉 渲染 页面只需遍历remainFilters
        computed: {
            remainFilters() {
                const keys = Object.keys(this.search.filter);
                if (this.search.filter.cid3) {
                    keys.push("cid3")
                }
                if (this.search.filter.brandId) {
                    keys.push("brandId")
                }
                return this.filters.filter(f => !keys.includes(f.k));
            }
        },
        components: {
            lyTop: () => import("./js/pages/top.js")
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</body>
<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
        <div class="jtc-item-promo">
            <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
            <div class="promo-text">已购满600元，您可领赠品</div>
        </div>
        <div class="jtc-item-goods">
            <span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50"/></a></span>
            <div class="p-name">
                <a href="#">{1}</a>
            </div>
            <div class="p-price"><strong>¥{3}</strong>×{4}</div>
            <a href="#none" class="p-del J-del">删除</a>
        </div>
    </div>
</script>
<!--侧栏面板结束-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/model/cartModel.js"></script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/cartPanelView.js"></script>

</html>